<template>
	<div class="tab-bar-wrap">
		<div class="tab-bar-item left">
			<div class="tab-bar-card" @click="tabChange('home')">
				<img class="icon" :src="action=='home' ? homeAction : homeDefault " />
				<span :class="action=='home' ? 'action' : 'default' ">首页</span>
			</div>
			<div class="tab-bar-card" @click="tabChange('collect')">
				<img class="icon" :src="action=='collect' ? collectAction : collectDefault " />
				<span :class="action=='collect' ? 'action' : 'default' ">收藏</span>
			</div>
		</div>
		<div class="tab-bar-add" @click="tabPublish">
			<img src="../../assets/images/tabbar/add.png"/>
		</div>
		<div class="tab-bar-item right">
			<div class="tab-bar-card" @click="tabChange('message')" >
				<img class="icon" :src="action=='message' ? msgAction : msgDefault " />
				<span :class="action=='message' ? 'action' : 'default' ">消息</span>
				<b class="tabIcon" v-if="allNum!=0">{{allNum}}</b>
			</div>
			<div class="tab-bar-card" @click="tabChange('mine')" >
				<img class="icon" :src="action=='mine' ? mineAction : mineDefault " />
				<span :class="action=='mine' ? 'action' : 'default' ">我的</span>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from "vue";
	import user from '@/utils/isLogin';
	import axios from "axios";
	export default{
		data(){
			return{
				action:'home',
				homeDefault:require('../../assets/images/tabbar/home-default.png'),
				homeAction:require('../../assets/images/tabbar/home-action.png'),
				collectDefault:require('../../assets/images/tabbar/collect-default.png'),
				collectAction:require('../../assets/images/tabbar/collect-action.png'),
				msgDefault:require('../../assets/images/tabbar/msg-default.png'),
				msgAction:require('../../assets/images/tabbar/msg-action.png'),
				mineDefault:require('../../assets/images/tabbar/mine-default.png'),
				mineAction:require('../../assets/images/tabbar/mine-action.png'),
				isClick:true,
				allNum:''
			}
		},
		created(){
			var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
			if(userInfo == undefined || userInfo == null){
//				break;
			}else{
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				axios.post(user.src + '/index/My/allNum',{
					userid:userId
				})
				.then(res=> {
					if(res.status == 200){
						this.allNum = res.data.count;
					}
				})
				.catch(error=>{
				});
				setInterval(()=>{
					var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
					axios.post(user.src + '/index/My/allNum',{
						userid:userId
					})
					.then(res=> {
						if(res.status == 200){
							this.allNum = res.data.count;
						}
					})
					.catch(error=>{
					});
				},1000)
			}
			function plusReady(){
				
			}
			if (window.plus) {
		      plusReady();
		   } else {
		      document.addEventListener("plusready", plusReady, false);
		   }
		},
		methods:{
			tabPublish(){
				if(this.isClick){
					this.isClick = false;
					var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
					if(userInfo == undefined||userInfo == null){
						var login = plus.webview.create('login.html','login',{},{});
						login.addEventListener("loaded", ()=> {
						   login.show('slide-in-top', 300);
						   this.isClick = true;
						   login = null;
						}, false);
					}else{
						var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
						if(userId){
							var publish = plus.webview.create('publish.html','publish',{},{});
							publish.addEventListener("loaded", ()=> {
							   publish.show('slide-in-top', 300);
							   this.isClick = true;
							   publish = null;
							}, false);
						}
					}
				}
			},
			tabChange(id){
				var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
				if(userInfo == undefined || userInfo == 'null'||userInfo == null){
					if(id == 'home'){
						id = 'home'
					}else{
						if(this.isClick){
							this.isClick = false;
							var login = plus.webview.create('login.html','login',{},{});
							login.addEventListener("loaded", ()=> {
							   login.show('pop-in', 300);
							   this.isClick = true;
							   login = null;
							}, false);
						}
					}
				}else{
					var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
					if(userId){
						if(this.action==id){
							return;
						}
						this.action = id;
						this.$emit('tabChange',{
							id:id
						})
					}
				}
			}
		}
	}
</script>
<style lang="less" scoped>
.tab-bar-wrap{
	position: fixed;
	bottom: 0;
	height: 100px;
	width: 750px;
	background: #fff;
	display: flex;
	/*box-shadow: 0 6px 8px #999 inset;*/
	.tab-bar-item{
		width:310px;
		height: 100%;
		display: flex;
	}
	.tab-bar-add{
		width:130px;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		img{
			width: 86px;
			height: 86px;
		}
	}
	.tab-bar-card{
		position: relative;
		display: flex;
		width: 155px;
		height: 100%;
		flex-direction:column;
		justify-content: center;
		align-items: center;
		.tabIcon{
			/*display: block;*/
			position: absolute;
			right: 43px;
			top: 5px;
			padding: 4px 10px 4px 10px;
			background: red;
			border-radius: 60px;
			font-size: 20px;
			color: #fff;
		}
		.icon{
			width: 40px;
			height: 40px;
			margin-bottom: 12px;
			margin-top: 12px;
		}
		span{
			font-size: 24px;
			color: #333;
		}
		.default{
			font-weight: 400;
		}
		.action{
			font-weight: 700;
		}
	}
}
</style>